<template>
	<view class="activity-detail">
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#333333">
		</tn-nav-bar>

		<!-- 活动头图 -->
		<view class="banner-container">
			<image class="activity-banner" :src="activityData.coverImage[0]" mode="aspectFill"
				@error="handleBannerError"></image>
		</view>

		<!-- 活动基本信息 -->
		<view class="activity-info">
			<text class="activity-title">{{ activityData.title }}</text>
			<view class="activity-meta">
				<view class="meta-item">
					<text>时间：{{ activityData.startTime }} ~ {{ activityData.endTime }}</text>
				</view>
				<view class="meta-item">
					<text>地点：{{ activityData.location || '暂无' }}</text>
				</view>
				<view class="meta-item">
					<text>截止报名：{{ activityData.signupDeadline }}</text>
				</view>
				<view class="meta-item">
					<text>联系电话：{{ activityData.contactPhone || '暂无' }}</text>
				</view>
			</view>
			<view class="activity-organizer">
				由 未知主办方 主办 / 发起
			</view>
		</view>

		<!-- 活动详情 -->
		<view class="activity-detail-section">
			<view class="section-title">
				<text class="title-dot"></text>
				活动详情
			</view>
			<view class="section-content">
				<view v-if="activityData.details" class="detail-text">{{ activityData.details }}</view>
				<view v-else class="no-detail">暂无活动详情说明</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-btn">
			<view class="action-buttons">
				<view class="action-item" @click="handleLike">
					<view class="action-icon" :class="{ 'liked': isLiked }">
						<text class="tn-icon-like" :class="{ 'tn-color-red': isLiked }"></text>
					</view>
					<text class="action-text" :class="{ 'tn-color-red': isLiked }">{{ likeCount }}</text>
				</view>
				<view class="action-item" @click="handleCollect">
					<view class="action-icon" :class="{ 'collected': isCollected }">
						<text class="tn-icon-star" :class="{ 'tn-color-yellow': isCollected }"></text>
					</view>
					<text class="action-text" :class="{ 'tn-color-yellow': isCollected }">{{ collectCount }}</text>
				</view>
			</view>
			<button class="signup-btn" :class="{ 
					'ended': activityStatus === 'ended', 
					'ongoing': activityStatus === 'ongoing',
					'signed-up': activityStatus === 'signedUp'
				}" @click="handleSignup" :disabled="activityStatus === 'ended' || activityStatus === 'ongoing'">
				{{ buttonText }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ActivityDetail',
		data() {
			return {
				isLiked: false,
				isCollected: false,
				likeCount: 156,
				collectCount: 89,
				activityStatus: '', // ended:已结束, ongoing:进行中, notStarted:未开始, signedUp:已报名
				buttonText: '',
				// 初始化活动数据，避免接收前报错
				activityData: {
					id: '',
					title: '加载中...',
					coverImage: ['/static/activityImg/default.jpg'],
					startTime: '',
					endTime: '',
					location: '',
					registrationDeadline: '',
					signupDeadline: '暂无',
					contactPhone: '',
					details: '',
					status: 'upcoming'
				}
			};
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			// 接收列表页传递的活动数据
			eventChannel.on('passActivityData', (res) => {
				const activity = res.data || {};
				// 合并数据，覆盖初始化值
				this.activityData = {
					...this.activityData,
					...activity,
					// 映射后端registrationDeadline为详情页的signupDeadline
					signupDeadline: activity.registrationDeadline || '暂无'
				};
				// 优先读取本地存储的“已报名”状态（避免刷新丢失）
				const localSignedUp = uni.getStorageSync(`activity_signed_${this.activityData.id}`);
				if (localSignedUp) {
					this.activityStatus = 'signedUp';
					this.buttonText = '报名成功';
				} else {
					this.checkActivityStatus();
				}
			});
		},
		methods: {
			// 导航返回
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 头图加载失败处理
			handleBannerError() {
				this.activityData.coverImage[0] = '/static/activityImg/default.jpg';
			},
			// 点赞处理
			handleLike() {
				this.isLiked = !this.isLiked;
				this.likeCount += this.isLiked ? 1 : -1;
				uni.showToast({
					title: this.isLiked ? '点赞成功' : '取消点赞',
					icon: this.isLiked ? 'success' : 'none',
					duration: 1500
				});
			},
			// 收藏处理
			handleCollect() {
				this.isCollected = !this.isCollected;
				this.collectCount += this.isCollected ? 1 : -1;
				uni.showToast({
					title: this.isCollected ? '收藏成功' : '取消收藏',
					icon: this.isCollected ? 'success' : 'none',
					duration: 1500
				});
			},
			// 根据活动状态设置按钮文案
			checkActivityStatus() {
				const listStatus = this.activityData.status; // 接收列表页的状态（upcoming/ongoing/ended）
				switch (listStatus) {
					case 'upcoming':
						this.activityStatus = 'notStarted';
						this.buttonText = '立即报名';
						break;
					case 'ongoing':
						this.activityStatus = 'ongoing';
						this.buttonText = '活动已开始';
						break;
					case 'ended':
						this.activityStatus = 'ended';
						this.buttonText = '活动已结束';
						break;
					default:
						this.activityStatus = 'notStarted';
						this.buttonText = '立即报名';
				}
			},
			// 处理报名/取消报名
			handleSignup() {
				if (this.activityStatus === 'signedUp') {
					// 取消报名
					uni.showToast({
						title: '已取消报名',
						icon: 'none',
						duration: 1500
					});
					this.activityStatus = 'notStarted';
					this.buttonText = '立即报名';
					// 移除本地存储的报名状态（用id作为唯一标识，避免标题重复问题）
					uni.removeStorageSync(`activity_signed_${this.activityData.id}`);
				} else {
					// 立即报名
					uni.showToast({
						title: '报名成功',
						icon: 'success',
						duration: 1500
					});
					this.activityStatus = 'signedUp';
					this.buttonText = '报名成功';
					// 存储报名状态到本地
					uni.setStorageSync(`activity_signed_${this.activityData.id}`, true);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.activity-detail {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding-top: 83rpx;
	}

	/* 导航栏样式优化 */
	.tn-nav-bar {
		--tn-nav-bar-height: 83rpx !important;
		--tn-nav-bar-title-font-size: 32rpx !important;
	}

	/* 头图容器 */
	.banner-container {
		position: relative;
		width: 100%;
		height: 360rpx;
		overflow: hidden;
	}

	/* 活动头图样式 */
	.activity-banner {
		width: 100%;
		height: 100%;
		display: block;
	}

	/* 活动基本信息样式 */
	.activity-info {
		padding: 30rpx;
	}

	.activity-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.activity-meta {
		margin-bottom: 20rpx;
	}

	.meta-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.activity-organizer {
		font-size: 28rpx;
		color: #999;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
	}

	/* 活动详情区域 */
	.activity-detail-section {
		padding: 0 30rpx 180rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-dot {
		display: inline-block;
		width: 12rpx;
		height: 32rpx;
		background-color: #007356;
		margin-right: 15rpx;
	}

	.section-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}

	.detail-text {
		white-space: pre-line;
	}

	.no-detail {
		color: #999;
		text-align: center;
		padding: 50rpx 0;
	}

	/* 底部按钮样式 */
	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		transition: all 0.3s;
	}

	.action-item:active {
		background-color: #f5f5f5;
	}

	.action-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f8f8f8;
		margin-bottom: 10rpx;
		transition: all 0.3s;
	}

	.action-icon.liked {
		background-color: #fff0f0;
	}

	.action-icon.collected {
		background-color: #fffbf0;
	}

	.action-text {
		font-size: 24rpx;
		color: #999;
	}

	.signup-btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #007356;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin-left: 30rpx;
		max-width: 400rpx;
	}

	/* 已结束和进行中状态按钮样式 */
	.signup-btn.ended,
	.signup-btn.ongoing {
		background-color: #999;
	}

	/* 已报名状态按钮样式 */
	.signup-btn.signed-up {
		background-color: #00B42A;
	}

	/* 禁用状态优化 */
	.signup-btn:disabled {
		opacity: 0.8;
	}
</style>